<!-- 公共的header模块，每个页面直接引入即可 -->
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<div id="navbar" class="navbar navbar-default ace-save-state" th:fragment="header">
	
	<!--[if !IE]> -->
	<script th:src="@{/static/admin/js/jquery/jquery-2.1.4.min.js}"></script>
	<!-- <![endif]-->

	<!--[if IE]>
	<script th:src="@{/static/admin/js/jquery/jquery-1.11.3.min.js}"></script>
	<![endif]-->
	
	<div class="navbar-container ace-save-state" id="navbar-container">
		<button type="button" class="navbar-toggle menu-toggler pull-left" id="menu-toggler" data-target="#sidebar">
			<span class="sr-only">Toggle sidebar</span>

			<span class="icon-bar"></span>

			<span class="icon-bar"></span>

			<span class="icon-bar"></span>
		</button>

		<div class="navbar-header pull-left">
			<a href="/admin/index" class="navbar-brand">
				<small>
					<!-- <i class="fa fa-leaf"></i> -->
					<img width="25" th:src="@{/static/web/img/logos/logo.png}">
					Gweb 后台管理
				</small>
			</a>
		</div>

		<div class="navbar-buttons navbar-header pull-right" role="navigation">
			<ul class="nav ace-nav">
				
				<!-- 任务提醒 -->
				<li class="grey dropdown-modal">
					<a data-toggle="dropdown" class="dropdown-toggle" href="#">
						<i class="ace-icon fa fa-tasks icon-animated-wrench"></i>
						<span class="badge badge-grey">4</span>
					</a>

					<ul class="dropdown-menu-right dropdown-navbar dropdown-menu dropdown-caret dropdown-close">
						<li class="dropdown-header">
							<i class="ace-icon fa fa-check"></i>
							您有 4 项待办任务
						</li>

						<li class="dropdown-content">
							<ul class="dropdown-menu dropdown-navbar">
								<li>
									<a href="#">
										<div class="clearfix">
											<span class="pull-left">Software Update</span>
											<span class="pull-right">65%</span>
										</div>

										<div class="progress progress-mini">
											<div style="width:65%" class="progress-bar"></div>
										</div>
									</a>
								</li>

								<li>
									<a href="#">
										<div class="clearfix">
											<span class="pull-left">Hardware Upgrade</span>
											<span class="pull-right">35%</span>
										</div>

										<div class="progress progress-mini">
											<div style="width:35%" class="progress-bar progress-bar-danger"></div>
										</div>
									</a>
								</li>

								<li>
									<a href="#">
										<div class="clearfix">
											<span class="pull-left">Unit Testing</span>
											<span class="pull-right">15%</span>
										</div>

										<div class="progress progress-mini">
											<div style="width:15%" class="progress-bar progress-bar-warning"></div>
										</div>
									</a>
								</li>

								<li>
									<a href="#">
										<div class="clearfix">
											<span class="pull-left">Bug Fixes</span>
											<span class="pull-right">90%</span>
										</div>

										<div class="progress progress-mini progress-striped active">
											<div style="width:90%" class="progress-bar progress-bar-success"></div>
										</div>
									</a>
								</li>
							</ul>
						</li>

						<li class="dropdown-footer">
							<a href="#">
								查看任务详情
								<i class="ace-icon fa fa-arrow-right"></i>
							</a>
						</li>
					</ul>
				</li>

				<!-- 通知消息 -->
				<li class="purple dropdown-modal">
					<a data-toggle="dropdown" class="dropdown-toggle" href="#">
						<i class="ace-icon fa fa-bell icon-animated-bell"></i>
						<span class="badge badge-important">8</span>
					</a>

					<ul class="dropdown-menu-right dropdown-navbar navbar-pink dropdown-menu dropdown-caret dropdown-close">
						<li class="dropdown-header">
							<i class="ace-icon fa fa-exclamation-triangle"></i>
							您有 8 条通知
						</li>

						<li class="dropdown-content">
							<ul class="dropdown-menu dropdown-navbar navbar-pink">
								<li>
									<a href="#">
										<div class="clearfix">
											<span class="pull-left">
												<i class="btn btn-xs no-hover btn-pink fa fa-comment"></i>
												New Comments
											</span>
											<span class="pull-right badge badge-info">+3</span>
										</div>
									</a>
								</li>

								<li>
									<a href="#">
										<i class="btn btn-xs btn-primary fa fa-user"></i>
										Bob just signed up as an editor ...
									</a>
								</li>

								<li>
									<a href="#">
										<div class="clearfix">
											<span class="pull-left">
												<i class="btn btn-xs no-hover btn-success fa fa-shopping-cart"></i>
												New Orders
											</span>
											<span class="pull-right badge badge-success">+3</span>
										</div>
									</a>
								</li>

								<li>
									<a href="#">
										<div class="clearfix">
											<span class="pull-left">
												<i class="btn btn-xs no-hover btn-info fa fa-twitter"></i>
												Followers
											</span>
											<span class="pull-right badge badge-info">+1</span>
										</div>
									</a>
								</li>
							</ul>
						</li>

						<li class="dropdown-footer">
							<a href="#">
								查看所有通知
								<i class="ace-icon fa fa-arrow-right"></i>
							</a>
						</li>
					</ul>
				</li>
				
				<!-- 留言 -->
				<li  class="blue dropdown-modal" id="unreadMsgRemind">
					
				</li>
<!-- 				<li class="blue dropdown-modal" th:each="unreadMsg,var:${unreadMsgList}"> -->
<!-- 					<a data-toggle="dropdown" class="dropdown-toggle" href="#" th:if="${var.first}"> -->
<!-- 						<i class="ace-icon fa fa-comment-o icon-animated-wrench"></i> -->
<!-- 						<span class="badge badge-info" th:text="${var.size}"></span> -->
<!-- 					</a> -->

<!-- 					<ul class="dropdown-menu-right dropdown-navbar navbar-grey dropdown-menu dropdown-caret dropdown-close"> -->
<!-- 						<li class="dropdown-header"> -->
<!-- 							<i class="ace-icon fa fa-comment-o" th:text="' &nbsp;您有'+${var.size}+'条新的留言'"></i> -->
<!-- 						</li> -->
						
<!-- 						<li class="dropdown-content"> -->
<!-- 							<ul class="dropdown-menu dropdown-navbar"> -->
<!-- 								<li th:each="unreadMsg,var:${unreadMsgList}"> -->
<!-- 									<a href="/admin/web/message/list" class="clearfix"> -->
<!-- 										<img th:src="@{/static/admin/images/avatars/avatar2.png}" class="msg-photo" alt="Alex's Avatar" /> -->
<!-- 										<span class="msg-body"> -->
<!-- 											<span class="msg-title" > -->
<!-- 												<span class="blue" th:text="${unreadMsg.name}+':'"></span> -->
<!-- 												<span th:text="${unreadMsg.message}"></span> -->
<!-- 											</span> -->

<!-- 											<span class="msg-time"> -->
<!-- 												<i class="ace-icon fa fa-clock-o"></i> -->
<!-- 												<span th:text="${unreadMsg.time}"></span> -->
<!-- 											</span> -->
<!-- 										</span> -->
<!-- 									</a> -->
<!-- 								</li> -->
<!-- 							</ul> -->
<!-- 						</li> -->

<!-- 						<li class="dropdown-footer"> -->
<!-- 							<a href="/admin/web/message/list"> -->
<!-- 								查看更多留言 -->
<!-- 								<i class="ace-icon fa fa-arrow-right"></i> -->
<!-- 							</a> -->
<!-- 						</li> -->
<!-- 					</ul> -->
<!-- 				</li> -->
				
				<!-- 邮件 -->
				<li class="green dropdown-modal">
					<a data-toggle="dropdown" class="dropdown-toggle" href="#">
						<i class="ace-icon fa fa-envelope icon-animated-vertical"></i>
						<span class="badge badge-success">2</span>
					</a>

					<ul class="dropdown-menu-right dropdown-navbar navbar-green dropdown-menu dropdown-caret dropdown-close">
						<li class="dropdown-header">
							<i class="ace-icon fa fa-envelope-o"></i>
							您有 5 封新的邮件
						</li>

						<li class="dropdown-content">
							<ul class="dropdown-menu dropdown-navbar">
								<li>
									<a href="/admin/tools/emails/list" class="clearfix">
										<img th:src="@{/static/admin/images/avatars/avatar2.png}" class="msg-photo" alt="Bob's Avatar" />
										<span class="msg-body">
											<span class="msg-title">
												<span class="blue">Bob:</span>
												这是我的邮件
											</span>

											<span class="msg-time">
												<i class="ace-icon fa fa-clock-o"></i>
												<span>3:15 pm</span>
											</span>
										</span>
									</a>
								</li>
								
								<li>
									<a href="/admin/tools/emails/list" class="clearfix">
										<img th:src="@{/static/admin/images/avatars/avatar2.png}" class="msg-photo" alt="Bob's Avatar" />
										<span class="msg-body">
											<span class="msg-title">
												<span class="blue">Bob:</span>
												这是我的邮件
											</span>

											<span class="msg-time">
												<i class="ace-icon fa fa-clock-o"></i>
												<span>3:15 pm</span>
											</span>
										</span>
									</a>
								</li>

							</ul>
						</li>

						<li class="dropdown-footer">
							<a href="/admin/tools/emails/list">
								查看更多邮件
								<i class="ace-icon fa fa-arrow-right"></i>
							</a>
						</li>
					</ul>
				</li>

				<!-- 个人设置、退出 -->
				<li class="light-blue dropdown-modal">
					<a data-toggle="dropdown" href="#" class="dropdown-toggle">
						<img class="nav-user-photo" id="nav-user-photo" src="/static/admin/images/avatars/avatar2.png" alt="头像" />
						<span class="user-info">
							<small>欢迎登陆</small>
								<span id="loginUserName"></span>
								
								<script type="text/javascript">
									
								</script>
								
						</span>

						<i class="ace-icon fa fa-caret-down"></i>
					</a>

					<ul class="user-menu dropdown-menu-right dropdown-menu dropdown-yellow dropdown-caret dropdown-close">
						<li>
							<a href="#">
								<i class="ace-icon fa fa-cog"></i>
								设置
							</a>
						</li>

						<li>
							<a href="/admin/demos/morePages/profile">
								<i class="ace-icon fa fa-user"></i>
								个人中心
							</a>
						</li>

						<li class="divider"></li>

						<li>
							<a href="/admin/logout">
								<i class="ace-icon fa fa-power-off"></i>
								退出
							</a>
						</li>
					</ul>
				</li>
			</ul>
		</div>
	</div><!-- /.navbar-container -->
	<script type="text/javascript">
// 		//登录用户的信息
// 		$('#loginUserName').html(info.getLoginUserObj().username);
// 		$('#nav-user-photo').attr('src', info.getLoginUserObj().faceImage);
		
// 		//添加未读留言消息提醒
// 		var unreadMsg = remind.getUnreadMsg();
// 		$('#unreadMsgRemind').html(unreadMsg);
	</script>
</div>

</html>